<template>
<div class="moon">
  <div class="moon-container"></div>
</div>
</template>

<style lang="scss" scoped>
.moon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 12em;
  background: #1e1a23;
}
.moon-container {
  display: flex;
  width: 8em;
  height: 8em;
  margin: 0 auto;
  background: #1e1a23;
  box-shadow: 0.5em -0.5em 0.3em crimson inset;
  border-radius: 50%;
  animation: run 2s linear infinite;

  &::before, &::after {
    position: absolute;
    content: '';
    width: 100%;
    height: 100%;
    box-shadow: inherit;
    border-radius: inherit;
  }

  &::before {
    filter:blur(5px);
  }

  &::after {
    filter: blur(10px);
  }

  @keyframes run {
    to {
      transform: rotate(1turn)
    }
  }
}
</style>
